<style lang="less">
    @import '../../../styles/common.less';
</style>

<template>
    <Card style="height:900px">
      <Card>
        <header>
          <Row>
              <DatePicker type="date" placeholder="创建时间(起)" style="width: 150px;margin-top:5px;" v-model="queryCondition.createBeginDate"  value="yyyy-MM-dd"></DatePicker>
              <span style="margin-left: 10px;margin-top:5px;">-</span>
              <DatePicker type="date"  placeholder="创建时间(止)" style="width: 150px;margin-top:5px;" v-model="queryCondition.createEndDate"  value="yyyy-MM-dd"></DatePicker>
              <DatePicker type="date" placeholder="结案时间(起)" style="width: 150px;margin-top:5px;" v-model="queryCondition.caseSettleBeginDate"  value="yyyy-MM-dd"></DatePicker>
              <span style="margin-left: 10px;margin-top:5px;">-</span>
              <DatePicker type="date"  placeholder="结案时间(止)" style="width: 150px;margin-top:5px;" v-model="queryCondition.caseSettleEndDate"  value="yyyy-MM-dd"></DatePicker>
              <Input v-model="queryCondition.loanId" placeholder="进件单号" style="width:150px;margin-top:5px;"/>
              <Input v-model="queryCondition.custName" placeholder="姓名" style="width:150px;margin-top:5px;"/>
              <Input v-model="queryCondition.custCardNo" placeholder="证件号码" style="width:150px;margin-top:5px;" />
              <Input v-model="queryCondition.assigneeName" placeholder="处理人" style="width:150px;margin-top:5px;" />
              <Select v-model="queryCondition.productCode"  placeholder="产品名称" style="width:150px;margin-top:5px;">
                <Option v-for="item in productList"   :value="item.productType"  :key="item.productType">{{item.productTypeName }}</Option>
              </Select>
              <!-- <Select  placeholder="业务状态" v-model="queryCondition.stateId"   style="width:150px;">
                  <Option v-for="item in caseStatusList"  :value="item.stateId" :key="item.stateId">{{ item.stateExplain}}</Option>
              </Select> -->
              <Select  placeholder="流程节点" v-model="queryCondition.nodeCode"   style="width:150px;margin-top:5px;">
                  <Option v-for="item in nodeCodeList"  :value="item.nodeCode" :key="item.nodeCode">{{ item.nodeName}}</Option>
              </Select>
              <Select class="v-select-wrapper" placeholder="渠道大类" v-model="queryCondition.patternCode"  @on-change="patternChange" style="width:150px;margin-top:5px;">
                          <Option v-for="item in patternList"  :value="item.patternCode" :key="item.patternCode">{{ item.patternName }}</Option>
              </Select>
              <Select v-model="queryCondition.channelType"  placeholder="渠道来源" style="width:150px;margin-top:5px;">
                <Option v-for="item in channelList"  :value=" item.channelCode" :key=" item.channelCode">{{ item.channelName}}</Option>
              </Select>
               <Select v-model="queryCondition.approveRst"  placeholder="批核结果" style="width:150px;margin-top:5px;">
                <Option v-for="item in approveRstList"   :value="item.value"  :key="item.value">{{item.label }}</Option>
              </Select>
              <!-- <Select v-model="queryCondition.processStatusCode"  placeholder="流程状态" style="width:150px">
                  <Option v-for="item in processStatusList"  :value="item.processStatusCode" :key="item.processStatusCode">{{  item.processStatusName}}</Option>
              </Select> -->
              <Button type="primary"  @click="listQuery" style="margin-top:5px;">查询</Button>
              <Button type="primary"  @click="reset" style="margin-top:5px;">重置</Button>
          </Row>
          </header>
      </Card>
      <Card>
          <Row type="flex" justify="center" align="middle">
              <Table border  :columns="listInfoColumns" :data="listInfoData" style="width: 100%;"></Table>
          </Row>
          <div style="margin-top: 36px;text-align: center;">
                <Page :total="queryCondition.total" :current="queryCondition.pageNum" :page-size="queryCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
          </div>
      </Card>
    </Card>
</template>

<script>

export default {
  name: 'approval-process-query',
  data () {
    return {
      queryCondition: {
        createBeginDate: '', // 创建时间(起)
        createEndDate: '', // 创建时间(止)
        caseSettleBeginDate: '', // 结案时间(起)
        caseSettleEndDate: '', // 结案时间(止);
        loanId: '', // 进件单号
        custName: '', // 姓名
        custCardNo: '', // 证件号码
        assigneeName: '', // 处理人
        productCode: '', // 产品名称
        stateId: '', // 业务状态Id
        caseStatusList: [], // 业务状态列表
        nodeCode: '', // 流程节点代码
        patternCode: '', // 渠道大类
        channelType: '', // 渠道来源
        approveRst: '', // 批核结果
        // processStatusCode:'',//流程状态
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      productList: [],
      nodeCodeList: [],
      // caseStatusList: [
      //   {
      //     'stateId': 'Z01',
      //     'stateExplain': '征信审核中'
      //   },
      //   {
      //     'stateId': 'Z02',
      //     'stateExplain': '征信挂起'
      //   },
      //   {
      //     'stateId': 'Z81',
      //     'stateExplain': '征信退回（退回前端）'
      //   },
      //   {
      //     'stateId': 'J07',
      //     'stateExplain': '征信退回（退回录入）'
      //   },
      //   {
      //     'stateId': 'ZR0',
      //     'stateExplain': '征信拒绝'
      //   },
      //   {
      //     'stateId': 'S01',
      //     'stateExplain': '待审批抢件'
      //   },
      //   {
      //     'stateId': 'S00',
      //     'stateExplain': '审批中'
      //   },
      //   {
      //     'stateId': 'S02',
      //     'stateExplain': '审批挂起'
      //   },
      //   {
      //     'stateId': 'S81',
      //     'stateExplain': '审批退回'
      //   },
      //   {
      //     'stateId': 'SR0',
      //     'stateExplain': '审批拒绝'
      //   },
      //   {
      //     'stateId': 'C01',
      //     'stateExplain': '待审计抢件'
      //   },
      //   {
      //     'stateId': 'C00',
      //     'stateExplain': '审计中'
      //   },
      //   {
      //     'stateId': 'C02',
      //     'stateExplain': '审计挂起'
      //   },
      //   {
      //     'stateId': 'C81',
      //     'stateExplain': '审计退回'
      //   },
      //   {
      //     'stateId': 'CR0',
      //     'stateExplain': '审计拒绝'
      //   }

      // ], // 业务状态
      patternList: [],
      channelList: [],
      approveRstList: [{
        value: '',
        label: '请选择'
      },
      {
        value: 'AR',
        label: '通过'
      },
      {
        value: 'RJ',
        label: '拒绝'
      },
      {
        value: 'ZH',
        label: '退回'
      }
      ],
      // processStatusList: [],//流程状态
      listInfoColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '进件单号',
          key: 'loanId'
        },
        // loanId
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  this.$router.push({ name: 'task_detail', query: { 'loanId': params.row.loanId, type: 2, 'collapseCotrol': true } })// 任务处理详情页面
                }
              }
            }, params.row.custName)
          }
        },
        {
          title: '身份证号',
          key: 'custIdNumber'
        },
        // {
        //     title: '业务类型',
        //     key: 'businessType',
        //     align: 'center'
        // },
        // {
        //     title: '子业务类型',
        //     key: 'subServiceType',
        //     align: 'center'
        // },
        {
          title: '产品',
          key: 'productTypeName'
        },
        {
          title: '创建时间',
          key: 'createdDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.createdDate))
            ])
          }
        },
        {
          title: '入池时间',
          key: 'innerPoolDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.innerPoolDate))
            ])
          }
        },
        {
          title: '处理人',
          key: 'assigneeName',
          align: 'center'
        },
        {
          title: '工单状态',
          key: 'caseStatusName',
          align: 'center'
        }
      ],
      listInfoData: []
    }
  },

  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.screenConditon()
    console.log('init query....')
  },
  methods: {
    reset () {
      var vm = this
      vm.queryCondition.createBeginDate = ''// 创建时间(起)
      vm.queryCondition.createEndDate = ''/// /创建时间(止)
      vm.queryCondition.caseSettleBeginDate = ''/// /结案时间(起)
      vm.queryCondition.caseSettleEndDate = ''/// /结案时间(止);
      vm.queryCondition.loanId = '' /// 进件单号
      vm.queryCondition.custName = ''/// /姓名
      vm.queryCondition.custCardNo = ''/// 证件号码
      vm.queryCondition.assigneeName = ''/// 处理人
      vm.queryCondition.productCode = ''/// /产品名称
      vm.queryCondition.stateId = ''/// /业务状态
      vm.queryCondition.patternCode = ''// 渠道大类
      vm.queryCondition.channelType = ''// 渠道来源
      vm.queryCondition.processStatusCode = ''// 流程状态
    },
    listQuery () {
      var vm = this
      vm.queryCondition.caseStatusList = []
      if (vm.queryCondition.stateId) {
        vm.queryCondition.caseStatusList.push({ 'stateId': vm.queryCondition.stateId })
      } else {
        // vm.queryCondition.caseStatusList = vm.caseStatusList
        vm.queryCondition.caseStatusList = null
      }
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/approvalManagement/approvalProcess/service/listQuery', vm.queryCondition).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.listInfoData = data.data.list
        vm.queryCondition.total = data.data.total
      }).catch(er => {

      })
    },
    // 筛选条件展示
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/approvalManagement/approvalProcess/service/screeneCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.patternList.push({ patternCode: '', patternName: '请选择' })
        for (var patternLength = 0; patternLength < data.data.channelList.patternList.length; patternLength++) {
          vm.patternList.push(data.data.channelList.patternList[patternLength])
        }
        vm.productList.push({ productType: '', productTypeName: '请选择' })
        var productLength = 0
        for (;productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
        vm.nodeCodeList.push({ nodeCode: '', nodeName: '请选择' })
        for (var nodeCodeLength = 0; nodeCodeLength < data.data.nodeList.length; nodeCodeLength++) {
          vm.nodeCodeList.push(data.data.nodeList[nodeCodeLength])
        }
      }).catch(er => {

      })
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.queryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.queryCondition.pageSize = pageLength
      vm.listQuery()
    },
    patternChange (value) {
      var vm = this
      vm.j = 0
      for (vm.j; vm.j < vm.patternList.length; vm.j++) {
        if (vm.patternList[vm.j].patternCode === value) {
          vm.channelList = vm.patternList[vm.j].patternList
        }
      }
    }
  }

}
</script>

<style>

</style>
